<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <!--设置ico图标-->
    <link rel="icon" href="/img/icon/favicon.ico" type="image/x-icon" />
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/js/elementUI/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="/js/elementUI/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="/js/elementUI/index.js"></script>
    <!-- 引入axios 的js-->
    <script src="/js/axios/axios.js"></script>
    <style type="text/css">
        .el-header{
            background-color: #ffffff;
            /*text-align: left;*/
            line-height: 60px;
            border-bottom: #ccc solid 1px;
        }


        .el-aside {
            /*background-color: #D3DCE6;*/
            color: #333;
            border-right: #ccc solid 1px;
            /*text-align: center;*/
            height: 100%;
        }
        .el-main {
            padding: 0;
            overflow: hidden;
            background-color: #E9EEF3;
            color: #333;
            /*text-align: center;*/
            height: 100%;
        }
        .el-footer {
            background-color: rgba(214, 221, 231, 0.99);
            color: #333;
            border-top: #ccc solid 1px;
            text-align: center;
            line-height: 30px;
        }
        li{
            list-style:none;
            padding: 10px;
        }
        li:hover{
            background-color: #ecf5ff;
        }
        a{
            text-decoration:none;
            color:#000;
        }
        .time{
            text-align: center;
            font-size: 10px;
        }


    </style>
</head>
<body>
<div id="app">
    <el-container style="min-height: 900px; border: 1px solid #eee">
        <el-header>
            <div style="height: 50px; line-height: 50px; display: flex;">
                <div style="width: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue">后台管理</div>
                <div style="flex: 1"></div>
                <div style="width: 100px;display: contents;">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                            打瞌睡
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click.native="clickHtml('/login')">个人信息</el-dropdown-item>
                                <el-dropdown-item @click.native="clickHtml('/login')">修改密码</el-dropdown-item>
                                <el-dropdown-item @click.native="clickHtml('/login')">退出系统</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </el-header>
        <el-container>
            <div class="main_left">
                <el-aside width="200px">
                    <el-menu
                            default-active="1"
                            class="el-menu-vertical-demo">
                        <el-menu-item index="1">
                            <i class="el-icon-menu"></i>
                            <span slot="title">用户列表</span>
                        </el-menu-item>
                        <el-menu-item index="2" @click="clickHtml('123')" >
                            <i class="el-icon-setting"></i>
                            <span slot="title">
<!--                                <el-link  href="https://element.eleme.io" target="iframe_a">-->
                                    角色列表
<!--                                </el-link>-->
                            </span>
                        </el-menu-item>
                    </el-menu>

                    <ul>
                        <li><a href="/UserList" target="iframe_a">w3c school</a></li>
                        <li><a href="/map" target="iframe_a">百度地图</a></li>
                        <li><a href="https://www.cnblogs.com/" target="iframe_a">博客园</a></li>
                        <li><a href="http://www.ximalaya.com/" target="iframe_a">喜马拉雅</a></li>
                        <li><a href="https://jx.tmall.com/" target="iframe_a">天猫</a></li>
                        <li><a href="/login" target="iframe_a">登录</a></li>
                    </ul>
                </el-aside>
            </div>
            <el-container>
                <el-main>
                    <!-- frameborder是否显示iframe 周围的边框(0关闭边框) -->
                    <iframe src="/UserList" name="iframe_a" frameborder="0" width="100%" height="100%">
                        <div>欢迎测试！</div>
                    </iframe>
                </el-main>
                <el-footer height="40">
                    &copy;<span class="time">{{dateTime}}</span>
                </el-footer>
            </el-container>
        </el-container>
    </el-container>


    <div class="main_left">


    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                dateTime:1, //弹窗的确认操作
            }
        },
        created(){
            this.fun()
        },
        methods:{
            fun(){
                setTimeout(()=>{
                    this.getTime()
                    this.fun()
                },50)
            },
            clickHtml(str){
                //axios.js文件
                window.location.href = str;
                console.log(this.dateTime,str)

                //
                // axios.get(str, {
                //     params: {
                //         "page": 1,
                //         "rows": 5
                //     }
                // })
                //     .then((response)=> {
                //         console.log(response)
                //     })
                //     .catch((error)=> {
                //         console.log(error);
                //     });

            },
            getTime(){
                var now = new Date;
                var y = now.getFullYear();
                var m = now.getMonth()+1;
                var d = now.getDate();
                var h = now.getHours();
                var mm = now.getMinutes();
                var s = now.getSeconds();

                h = h < 10 ? "0" + h : h;
                d = d < 10 ? "0" + d : d;
                m = m < 10 ? "0" + m : m;
                mm = mm < 10 ? "0" + mm : mm;
                s = s < 10 ? "0" + s : s;
                this.dateTime = y + "/" + m + "/" + d + " " + h + ":" + mm + ":" + s;
            },
        }
    })
</script>
</body>
</html>
